<template>
  <div class='prize-list first-box'>
    <p class="title">
      <img class="fl" :src="imgs.logo" alt="">
      <span>奖品列表</span>
    </p>
    <ul>
      <li v-for="item in listData">
        <p><span class="dot"></span><span>{{item.prizetype}}：</span><span>{{item.prize}}</span><span class=" fr color-gold prize-names btn-active" @click="showPrizeList(item)">中奖名单</span></p>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      imgs:{
        logo:require('../../../assets/img/works/prize/1.png')
      },
      listData:[
        {
          prizetype:"一等奖",
          prize:"免费洗车券",
          type:1
        },{
          prizetype:"二等奖",
          prize:"免费洗车券",
          type:2
        },{
          prizetype:"三等奖",
          prize:"免费洗车券",
          type:3
        }
      ]
    };
  },
  methods: {
    showPrizeList(item){
      sessionStorage.setItem("prizeType",item.prizetype)
      this.$router.push("/works/activities/prizelist/type")
      console.log("click---中奖名单哦")
    }
  },
  created() {}
};
</script>
<style lang="scss" scoped>
.prize-list {
  
  .title{
    padding: 10px 15px;
    font-size: 16px;
    border-bottom: 1px solid #f2f2f2;

    img{
      height: 19px;
      margin-right: 5px;
    }
  }
  ul{
    padding: 0 15px;
      p{
        font-size: 14px;
        line-height: 40px;
        border-bottom: 1px solid #f2f2f2;

        .dot{
          display: inline-block;
          width: 0;
          height: 0;
          padding: 2px;
          transform: translateY(-50%);
          background-color: #FF9F20;
          border-radius: 50%;
          margin-right: 10px;
        }

        span:nth-child(3){
          color: #999;
          margin-left: 5px;
        }
        .prize-names{
          text-decoration: underline;
          margin-right: 10px;
        }
      }
    }
}
</style>